<template>
	<div class="student">
		<router-link to="/home">
         	<!-- <el-button type="warning" size="small" 	class="btn" style='margin-right: 5px;'  icon="el-icon-menu">首页</el-button> -->
        </router-link>
		<!--<el-button type="primary" class="btn" size="small"  @click="cancel" icon="search">返回</el-button>-->
        <!-- <el-button type="danger" class="btn" :disabled="multipleDeleteDisabled" icon="delete" @click="componentsShow('multipleDelete','')">批量删除</el-button> -->
        <i class="el-icon-close close" @click="cancel"></i>
        <!-- 表格区域 -->
				<div class="wrap1">
						<div class="top1">
								活动一
								<el-button type="primary" style="float:right"  class="but" size="small"  @click="add">保存</el-button>
						</div>
						<div class="banner">
							<div class="block">
							    <!-- <span class="demonstration">默认 Hover 指示器触发</span> -->
									<!-- http://192.168.3.150:8098/jiayin-controller/ -->
											<el-upload
											  class="avatar-uploader"
											  :action="imgurl"
											  :show-file-list="false"
											  :on-success="handleAvatarSuccess"
											  :before-upload="beforeAvatarUpload">
											  <img v-if="imageUrl" :src="imageUrl" class="avatar">
											  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
											</el-upload>
							  </div>
						</div>
						<div class="nr">
							<div class="nr1">
									<el-upload
										class="avatar-uploader"
										:action="imgurl"
										:show-file-list="true"
										:on-success="handleAvatarSuccess"
										:before-upload="beforeAvatarUpload">
										<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
							</div>
							<div class="nr2">
								<el-input  type="textarea"  :rows="9" placeholder="" v-model="text">
</el-input>
							</div>
						</div>
						<div class="imgnr">

						</div>
				</div>
	</div>
</template>

<script type="text/javascript">
	import qs from 'qs'

	export default {

		data () {
			return {
				fileList2: [],
				fileList:[],
				img1:'',
				text:'',
				// imgurl:this.$store.state.api + '/batch/upload',
				imgurl:this.$store.state.api + '/user/saveimg',
				// imgurl:this.$store.state.api + 'img',
				vzt:'Y',
				type:'1',
				imageUrl: '',
				imageUrl2: '',
				dataList: [],
				multipleDelNum: '',
			}
		},
		created () {
			//权限


			// this.search()

		},

		methods: {
			add(){

			},
			submitUpload() {
			 this.$refs.upload.submit();
		 },
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
		},
		beforeAvatarUpload(file) {
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		},
			handleRemove(file, fileList) {
			 console.log(file, fileList);
		 },
		 handlePreview(file) {
			 alert(2222)
			 console.log(file);
		 },
		 imglist(file,fileList){
			 console.log(file,111);
			 console.log(fileList);
		 },
			search () {
				 var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                      bjid:this.bjid1+'',
                       zt:this.vzt,
                       yhid:logininfo.id+'',
                       xxid:logininfo.xxid+''
               })
             //执行
                 this.axios.post(this.$store.state.api + '/user/eaveimg',  params2 )
                 .then(res => {
		                 console.log( '111',res);
											if (res.data.code == 1) {
												this.dataList = res.data.data.list;
												this.total = res.data.data.totalPage;
												this.$store.state.loading = false;
											}else{
												this.$store.dispatch('showAlert',res.data.msg)
												this.$store.state.loading = false;
											}
						       })

			},

			cancel () {
				if(this.$route.query.iid){
					this.$router.back(-1)
				}else{
					this.$emit('close',{type:'muban',cancel:true})
				}
			},
            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {

                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;

                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id

                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;

                        }else if(this.portComponents[i].type == 'test'){
                            this.portComponents[i].data.distinction  = "test";

                        }else if(this.portComponents[i].type == 'score'){
                            this.portComponents[i].data.distinction  = "score";

                        }else{
                            return;
                        }
                        return;
                    }
                }

            },
            componentsHide (setting) { //关闭组件
                console.log(setting)
								this.search();

                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;

                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }


		},
		computed: {
			multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
		}
	}
</script>

<style lang="less" scope>
.student {
	position: absolute;
	top:100px;left:0;
	width: 100%;
	height:100%;
	background: #E8EDF0;
	z-index: 99;
}

	.wrap1 {
		width: 500px;
		border: 1px solid #000;
		margin: 50px auto;
		.top1{
			width: 100%;
			height:50px;
			text-align: center;
			font-size: 15px;
			line-height: 50px;
			border-bottom:  1px solid #000;
		}
		.banner{
			width: 100%;
			height: 200px;
			.block{
				text-align: center;
			}
		}
		.nr{
			width: 100%;
			height: 200px;
			background: #ccc;
			overflow: hidden;
			.nr1{
				width: 50%;
				height: 100%;
				float: left;
				text-align: center;
			}
			.nr2{
				width: 50%;
				height: 100%;
				float: left;
				background: red;
			}
		}
		.imgnr{
			width: 100%;
			height: 300px;
			background: #fff;
		}
	}
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 150px;
	    margin: 0;
	  }

	  .el-carousel__item:nth-child(2n) {
	     background-color: #99a9bf;
	  }

	  .el-carousel__item:nth-child(2n+1) {
	     background-color: #d3dce6;
	  }
		.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
